﻿<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
		<meta charset="utf-8">
   		<meta http-equiv="X-UA-Compatible" content="IE=edge">
    	<meta name="viewport" content="width=device-width, initial-scale=1">
		<title><%-- ${goods.goods[0].goods_sorts} --%></title>
		<!-- Bootstrap -->
    	<link href="css/bootstrap.min.css" rel="stylesheet">
    	<link rel="stylesheet" href="css/sticky-footer-navbar.css" />
    	<link rel="stylesheet" href="css/common.css" />
    	<link rel="stylesheet" href="css/cpu.css" />
    	<link rel="stylesheet" href="css/index.css" />
    	<link rel="stylesheet" href="css/normalize.css">
    	<link rel="stylesheet" href="css/style1.css" media="screen" type="text/css" />
    	<style>
body {
  background: #060e1b;
 
}

canvas {
position:absolute;
  //opacity: 0.5;
  z-index:-1;
}


</style>

  </head>
  
<body>
	<canvas id="canvas"></canvas>
<script>
"use strict";

var canvas = document.getElementById('canvas'),
  ctx = canvas.getContext('2d'),
  w = canvas.width = window.innerWidth,
  h = canvas.height = window.innerHeight,

  hue = 217,
  stars = [],
  count = 0,
  maxStars = 1200;

var canvas2 = document.createElement('canvas'),
  ctx2 = canvas2.getContext('2d');
canvas2.width = 100;
canvas2.height = 100;
var half = canvas2.width / 2,
  gradient2 = ctx2.createRadialGradient(half, half, 0, half, half, half);
gradient2.addColorStop(0.025, '#fff');
gradient2.addColorStop(0.1, 'hsl(' + hue + ', 61%, 33%)');
gradient2.addColorStop(0.25, 'hsl(' + hue + ', 64%, 6%)');
gradient2.addColorStop(1, 'transparent');

ctx2.fillStyle = gradient2;
ctx2.beginPath();
ctx2.arc(half, half, half, 0, Math.PI * 2);
ctx2.fill();

// End cache

function random(min, max) {
  if (arguments.length < 2) {
    max = min;
    min = 0;
  }

  if (min > max) {
    var hold = max;
    max = min;
    min = hold;
  }

  return Math.floor(Math.random() * (max - min + 1)) + min;
}

function maxOrbit(x, y) {
  var max = Math.max(x, y),
    diameter = Math.round(Math.sqrt(max * max + max * max));
  return diameter / 2;
}

var Star = function() {

  this.orbitRadius = random(maxOrbit(w, h));
  this.radius = random(60, this.orbitRadius) / 12;
  this.orbitX = w / 2;
  this.orbitY = h / 2;
  this.timePassed = random(0, maxStars);
  this.speed = random(this.orbitRadius) / 900000;
  this.alpha = random(2, 10) / 10;

  count++;
  stars[count] = this;
}

Star.prototype.draw = function() {
  var x = Math.sin(this.timePassed) * this.orbitRadius + this.orbitX,
    y = Math.cos(this.timePassed) * this.orbitRadius + this.orbitY,
    twinkle = random(10);

  if (twinkle === 1 && this.alpha > 0) {
    this.alpha -= 0.05;
  } else if (twinkle === 2 && this.alpha < 1) {
    this.alpha += 0.05;
  }

  ctx.globalAlpha = this.alpha;
  ctx.drawImage(canvas2, x - this.radius / 2, y - this.radius / 2, this.radius, this.radius);
  this.timePassed += this.speed;
}

for (var i = 0; i < maxStars; i++) {
  new Star();
}

function animation() {
  ctx.globalCompositeOperation = 'source-over';
  ctx.globalAlpha = 0.8;
  ctx.fillStyle = 'hsla(' + hue + ', 64%, 6%, 1)';
  ctx.fillRect(0, 0, w, h)

  ctx.globalCompositeOperation = 'lighter';
  for (var i = 1, l = stars.length; i < l; i++) {
    stars[i].draw();
  };

  window.requestAnimationFrame(animation);
}

animation();
</script>
		<jsp:include page="/goodsServlet"></jsp:include>
		<!--导航-->
		<nav class="navbar navbar-inverse  navbar-fixed-top" id="nav">
			<div class="container" id="nav_1">
				<nav class="navbar-header">
					<button class="navbar-toggle collapsed" data-toggle="collapse" data-target="#myNavbar">
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
					</button>
					<a href="index.jsp" class="navbar-brand">M-SS网上商城</a>
				</nav>
				<div class="collapse navbar-collapse" id="myNavbar" id="myNavbar">
					<ul class="nav navbar-nav">
						<li class="active"><a href="#">首页</a></li>
						<li><a href="#">功能1</a></li>
						<li><a href="#">功能2</a></li>
						<li><a href="#">功能3</a></li>
						<li><a href="#">功能4</a></li>
					</ul>
					<ul class="nav navbar-nav navbar-responsive-collapse navbar-right">
						<li>
							<a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-user"></span> <c:if test="${MyUser eq null }">我的账户</c:if><c:if test="${MyUser ne null }">${MyUser.username }</c:if> <span class="caret"></span></a>
							<c:if test="${MyUser eq null }">
								<ul class="dropdown-menu dropdown-menu-left">
						        	<li><a href="${pageContext.request.contextPath }/login.jsp">登录</a></li>
						        	<li><a href="${pageContext.request.contextPath }/register.jsp">注册</a></li>   
					          	</ul>
				          	</c:if>
				          	<c:if test="${MyUser ne null }">
					          	<ul class="dropdown-menu dropdown-menu-left">
						        	<li><a href="${pageContext.request.contextPath }/user/userinfo.jsp">我的信息</a></li>
						        	<li><a href="${pageContext.request.contextPath }/user/order.jsp">我的订单</a></li>   
						        	<li><a href="${pageContext.request.contextPath }/exitServlet">退出</a></li>   
					          	</ul>
			          		</c:if>
						</li>
						<li>
							<a href="${pageContext.request.contextPath }/user/shopping.jsp"><span class="glyphicon glyphicon-shopping-cart"></span> 购物车</a>
						</li>
					</ul>
					<form class="navbar-form navbar-right hidden-sm">
						<div class="form-group">
							<input class="form-control" type="text" placeholder="搜索商品" id="serch"/>
						</div>
						 <button type="submit" class="btn btn-success">搜索</button>
					</form>
		     	</div>
			</div>
		</nav>
		<!--导航-->
		
		<div class="container mrtop67" id="cpu">
			<div class="panel panel-default" id="mr2">
				<div class="panel-heading" id="#menu2">
					${goods_sorts }
				</div>
			</div>
			
			 <c:forEach items="${goods }" var="goods"> 
				<div class="thumbnail col-sm-3">
					<a class="thumbnail" href="${pageContext.request.contextPath }/goods-details.jsp?goods_id=${goods.goods_id}"><img src="${pageContext.request.contextPath }/img/${goods.goods_pic }" alt="pic">
						<div class="caption text-center" >
							<span class="title" style="margin-top: 1px;">${goods.goods_dename }</span>
							<span class="body">
								${goods.goods_depict }
							</span>
							<a class="btn btn-info btbk" href="goods-details.jsp?goods_id=${goods.goods_id}">查看详情</a>
							<a class="btn btn-danger btbk" href="#">购买</a>
						</div>
					</a>
				</div>
			</c:forEach> 
			
		</div>
		
		<footer class="container-fluid panel-footer text-center footer">
			<p>网上商城 Copyright</p>
		</footer>
		<!--内容-->
	<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="js/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
	</body>
</html>

